<div class="content">
  <div *ngIf="imageUrls.length" class="content" [ngStyle]="{maxWidth: maxWidth,flexWrap: dragDisabled?'wrap':'nowrap'}" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropOption($event)">
    <div class="image" [ngStyle]="{marginBottom: mainImgBtn?'20px':'8px'}"
         [cdkDragDisabled]="dragDisabled" cdkDrag
         *ngFor="let url of imageUrls;let index=index">
      <div class="btnRow">
        <i nz-icon nzType="eye" nzTheme="outline" (click)="previewImage(url)"></i>
        <i nz-icon nzType="delete" nzTheme="outline" (click)="removeOptionImage(index)"
           *ngIf="deleteBtnVisible"></i>
      </div>
      <img [src]="url" alt="">
      <div *ngIf="mainImgBtn&&index>0" style="text-align: center;color: #40a9ff"
           (click)="setMainImgClick(index)">设为主图
      </div>
    </div>
    <div class="uploadFile" *ngIf="addFileArea&&imageUrls.length<maxImgLength">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      <input type="file" multiple (change)="fileChange($event)">
    </div>
  </div>
  <div *ngIf="imageUrl">
    <div class="image">
      <div class="btnRow">
        <i nz-icon nzType="eye" nzTheme="outline" (click)="previewImage(imageUrl)"></i>
        <i nz-icon nzType="delete" nzTheme="outline" (click)="removeOptionImage(imageUrl)"
           *ngIf="deleteBtnVisible"></i>
      </div>
      <img [src]="imageUrl" alt="">
    </div>
    <div class="uploadFile" *ngIf="addFileArea&&!imageUrl">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      <input type="file" (change)="fileChange($event)">
    </div>
  </div>
  <div class="uploadFile" *ngIf="addFileArea&&!imageUrls.length&&!imageUrl">
    <i nz-icon nzType="plus" nzTheme="outline"></i>
    <input type="file" (change)="fileChange($event)">
  </div>
</div>
